$main-width: 900px;
$message-height: 160px;
$head-img-height-width: 120px;
$transition-move-length : -160px;

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100%;
  min-width: 900px;
}

body {
  background-image: url("../img/bg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

div.bodyWrap {
  width: 100%;

  div.mainWrap {
    width: $main-width;
    margin: 40px auto 20px;
  }

  div.headWrap {
    text-align: left;
    div.eda-icon {
      color: white;
      font-size: 50px;
      font-weight: bold;
      float: left;
      padding-top: 10px;
    }
    div.info {
      width: 500px;
      padding: 16px 0 0 0;
      color: black;
      float: left;
      margin-left: 25px;
      line-height: 25px;
      border-top: solid 1px white;
      border-bottom: 1px solid white;
    }
    div.info-count, div.info-content {
      float: left;
      font-size: 25px;
      text-align: center;
    }
    div.info-content {
      width: 370px;
    }
    div.info-count {
      text-align: center;
      margin-left: 20px;
      float: right;
    }
    div.qrcode {
      float: right;
      height: 105px;
      width: 105px;
      background-image: url("../img/qrcode.jpg");
      background-size: 100% 100%;
      margin-left: 40px;
    }
  }

  div.contentWrap {
    width: $main-width;
    height : 500px;
    overflow: hidden;
    margin-top: 20px;
    position: relative;

    div.scroll-content {
      position:relative;
      height: $message-height;
      width: $main-width;
      background-image: url("../img/li-bg.png");
      background-size: 100% 100%;
      margin: 0 0 12px 0;

      div.scroll-left {
        float: left;

        div.head-img-wrap {
          margin-left: 20px;
          margin-top: 20px;
          position: relative;

          i.elem {
            display: block;
            position: relative;
            background-image: url("../img/ava-bg2.png");
            background-size: 100% 100%;
            border-radius: 50%;
            width: $head-img-height-width + 2px;
            height: $head-img-height-width + 2px;
          }

          i.elem:before {
            display: block;
            content: "";
            position: absolute;
            left: 2px;
            bottom: -19px;
            width: 90px;
            height: 65px;
            background-image: url("../img/ava-bg.png");
            background-size: 100% 100%;
            z-index : 3;
          }

          a {
            position: absolute;
            width: 120px;
            height : 120px;
            padding: 2px;
            border-radius: 50%;
            background-image: url("../img/headimg.jpg");
            background-size: 100% 100%;
            left: 2px;
            bottom: 0;
            z-index:1;
          }

          .head-img{
            height : 120px;
            width : 120px;
            position: absolute;
            left: 2px;
            bottom: 0;
            z-index:1;
            padding: 2px;
            border-radius: 50%;
          }

        }
      }

      div.scroll-right {
        float: left;
        text-align: left;
        margin: 30px 0 0 25px;
        color: darkblue;
        font-weight: bold;

        div.nickname {
          font-size: 28px;
        }

        div.message {
          font-size: 60px;
        }
      }
    }
  }

  div.footWrap {
    width : 100%;
    div.eda-icon{
      font-size: 50px;
      font-weight: bolder;
      color:white;
    }
  }
}

div.bodyWrap:before, div.bodyWrap:after {
  content: " ";
  display: table;
}

div.bodyWrap:after {
  clear: both;
}

div.clearfix {
  zoom: 1;
}

div.clearfix {
  content: "";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  overflow: hidden;
}

div.ctrl-btn{
  position:absolute;
  right : 0;
  bottom: 0;
}

.list-enter {
  opacity: 0;
}
.list-enter-active {
  opacity: 1;
  transition: all 600ms linear;
}
.list-leave {

}
.list-leave-active {
}

.move{
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  transition: all 600ms linear;
}

.move.active{
  -webkit-transform: translate3d(0, $transition-move-length, 0);
  -moz-transform: translate3d(0, $transition-move-length, 0);
  -ms-transform: translate3d(0, $transition-move-length, 0);
  -o-transform: translate3d(0, $transition-move-length, 0);
  transform: translate3d(0, $transition-move-length, 0);
}
